<template>
  <div id="coupon_v2_detail">
    <c-title :hide="false" text="优惠券详情"></c-title>
    <div class="coupon-detail">
      <coupon-info :dataInfo="datainfo" :image="img_url">
        <template #shareBtn>
          <div
            v-if="!useType.includes(datainfo.use_type) && !storeCoupon"
            class="coupon-btn"
            @click="goBuy(datainfo)" >
            立即使用
          </div>
        </template>
        <template #couponBtn>
          <div class="coupon-btnList flex flex-j-c">
            <div class="btn-item flex-a-c"  v-clipboard:copy="bind_coupon_url" v-clipboard:success="onCopy" v-if="bind_coupon_url">
              <div class="btn-circle flex-a-c flex-j-c"><span class="iconfont icon-a-lianjie3"></span></div>
              <p>复制链接</p>
            </div>
            <div class="btn-item flex-a-c" @click="presenter(datainfo)" v-if="isPresenter">
              <div class="btn-circle flex-a-c flex-j-c"><span class="iconfont icon-fenxiangyouhuiquan"></span></div>
              <p >转赠</p>
            </div>
            <div class="btn-item flex-a-c" v-if="write_off_coupon && datainfo.plugin_id == '32'" @click="tapShow">
              <div class="btn-circle flex-a-c flex-j-c"><span class="iconfont icon-saoma"></span></div>
              <p>核销</p>
            </div>
            <div class="btn-item flex-a-c" v-if="share_coupon" @click="tapShare">
              <div class="btn-circle flex-a-c flex-j-c"><span class="iconfont icon-fenxiang"></span></div>
              <p >分享</p>
            </div>
            <div class="btn-item flex-a-c" v-if="package_deliver_write_off"  @click="toDeliverWriteOff">
              <div class="btn-circle flex-a-c flex-j-c"><span class="iconfont icon-zitidianhexiao"></span></div>
              自提点核销
            </div>
          </div>
        </template>
        <template #desc>
          <div class="desc-content">
            <p>有效期：{{ datainfo.time_start }} — {{ datainfo.time_end }}</p>
            <p>适用范围：{{ datainfo.scope_content_diy?datainfo.scope_content_diy:datainfo.coupon_type_name }}</p>
            <!-- <p>领券说明：每个订单仅限使用一张优惠券，不可与其它优惠券叠加使用</p> -->
            <p>券张数：{{ couponNum }}张</p>
            <div class=" rule-box">
              <span class="rule-p">使用规则：</span>
              <span class="rule-content" v-html="rule"></span>
            </div>

            <div class="content" v-if="content">
              <p>使用说明：</p>
              <p v-html="content"></p>
            </div>
          </div>
        </template>
      </coupon-info>

      <!--适用商品和门店-->
      <div class="apply-shop" v-if="useType.includes(datainfo.use_type) && storeCoupon">
          <van-tabs
            v-model="active"
            @change="initList"
            :sticky="true"
            offset-top="40"
            line-width="15px"
            title-inactive-color="#00001C"
            :color="'var(--themeBaseColor)' || '#F15353'">
            <van-tab title="适用商品" v-if="storeCoupon.condition_type == 2">
              <!--v-if="goods_list && goods_list.length > 0"-->
              <div class="shopGoods-list flex flex-j-sb" >
                <shop-goods
                  v-for="(item,index) in goods_list"
                  :key="index"
                  @click.native="toGoodsStore(item.id)"
                  :goodsItem="item"
                  width="100%"
                  height="172.5px">
                </shop-goods>
              </div>
            </van-tab>
            <!--是门店或者平台商品和门店类型的优惠券才显示-->
            <van-tab title="适用门店">
              <div class="shop-list" v-if="storeCoupon.store_list">
                <!--指定门店 condition_type等于1时没有商品数据 || 门店独立后台发布的优惠券-->
                <div class="title" v-if="storeCoupon.condition_type == 1">{{ store_list.length }}个门店适用:</div>
                <div class="title" v-if="store_list.length <= 0">暂无门店适用</div>
                <block v-for="(item,index) in store_list" :key="index">
                  <div class="shop-item flex-a-c" @click="toStore(item.id)">
                    <div class="left flex">
                      <van-image
                        round
                        width="52px"
                        height="52px"
                        :src="item.thumb"
                      />
                    </div>
                    <div class="wrap flex">
                      <h3 class="pl">{{ item.store_name }}</h3>
                      <p>{{ item.address }}</p>
                    </div>
                    <div class="right flex-a-c">
                      <span>{{ item.distance }}{{ item.unit }}</span>
                        <i class="iconfont icon-daohang"></i>
                    </div>
                  </div>
                </block>
              </div>
            </van-tab>
          </van-tabs>
          <div
            v-if="(storeCoupon.is_all_store == 1 || storeCoupon.is_all_good == 1) && storeCoupon.condition_type == 2"
            class="moreTxt flex-a-c flex-j-c"
            @click="tapMoreBtn">查看更多<span class="iconfont icon-course_goon"></span></div>
        <!-- </van-sticky> -->
      </div>
      <div class="mb50"></div>
    </div>
    <!-- 分享张数选择 -->
    <van-dialog
      v-model="showSelect"
      title="分享张数"
      round
      width="75%"
      show-confirm-button
      show-cancel-button
      confirm-button-text="分享"
      confirm-button-color="var(--themeBaseColor)"
      @confirm="shareConfirm">
      <div class="share-main">
        <van-stepper v-model="shareNum"  theme="round" button-size="24"  disable-input @change="shareMunTap" />
      </div>
    </van-dialog>
    <!-- 转赠 -->
    <van-dialog
      v-model="showPresenter"
      title="请输入用户ID"
      round
      width="75%"
      show-confirm-button
      show-cancel-button
      confirm-button-color="var(--themeBaseColor)"
      @confirm="cancelRecharge"
      before-close>
      <div class="share-main user-main">
        <div>
          <input type="number" v-focus  placeholder="请输入赠送的用户ID" v-model="recharge_search" @keyup="throttleFn" />
          <div class="user-hint" v-show="nickname && recharge_search">
            <template v-if="nickname != '查无此用户'">昵称：</template>
            {{ nickname }}
          </div>
        </div>
        <div v-show="multiple_use.is_open || (config_info.switch && nickname != '查无此用户' && recharge_search)">
          <div class="flex-a-c flex-j-sb">
            <h3>兑换张数</h3>
            <van-stepper
              v-model="rechargeNum"
              v-if="multiple_use.is_open"
              theme="round"
              min="1"
              :max="multiple_use.nums"
              button-size="24" disable-input @change="changeRechargeNum(multiple_use.nums)" />
            <van-stepper
              v-model="rechargeNum"
              v-if="!multiple_use.is_open"
              theme="round"
              button-size="24"
              disable-input
              @change="changeRechargeNum(couponNum)" />
          </div>
          <div class="user-num" v-if="multiple_use.is_open">拥有数量{{ multiple_use.nums }}</div>
        </div>
      </div>
    </van-dialog>
    <van-dialog v-model="showRechargePay" :title="config_info.protocol_name" show-cancel-button @confirm="presenterPost">
      <div style="padding: 1rem 0.875rem;" v-html="config_info.protocol_content"></div>
    </van-dialog>
    <!-- 显示核销码 -->
    <div class="verification">
      <van-popup v-model="verification" round :style="{ height: '60%',width:'70%' }" @close="close_verification">
        <div class="verification-mian">
          <h3>优惠券核销</h3>
          <div class="ver-img">
            <img :src="verificationImg" alt />
          </div>
          <p>出示二维码 核销优惠券</p>
        </div>
        <div class="close" @click.stop="close_verification">
          <i class="iconfont icon-adsystem_icon_cancle" ></i>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import coupon_v2_detailcontroller from "./coupon_v2_detailcontroller";

export default coupon_v2_detailcontroller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
//新的样式
.desc-content ::v-deep .content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.desc-content ::v-deep .rule-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
 .pcStyle  #coupon_v2_detail ::v-deep  .van-dialog {
  width:20rem!important;
}
.pl {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数 */
  overflow: hidden;
}
.moreTxt {
  font-size: 0.8125rem;
  color: #6E6E79;
  padding:1.25rem 0 0.625rem 0;
  .iconfont {
    font-size: 0.75rem;
  }
}
.mb50 {
  height: 3.125rem;
  clear: both;
}
.coupon-detail ::v-deep .van-image {
  display: block;
}
#coupon_v2_detail ::v-deep .van-dialog__header {
  font-size: 1rem;
  font-weight: bold;
  color: #00001C;
  padding: 1.125rem 0 0 0;
}
.share-main ::v-deep .van-stepper {
  padding:1.3125rem 0 1rem 0;
}
.user-main ::v-deep .van-stepper {
  padding:1.3125rem 0 0.625rem 0;
}
.share-main ::v-deep  .van-stepper--round .van-stepper__minus {
  color:var(--themeBaseColor);
  border: 0.0625rem solid var(--themeBaseColor);
}
.share-main ::v-deep  .van-stepper--round .van-stepper__minus::before {
  background-color: var(--themeBaseColor);
}
.share-main ::v-deep  .van-stepper--round .van-stepper__plus {
  background-color: var(--themeBaseColor);
}
.apply-shop ::v-deep .van-tabs__nav {
  background-color: #F5F5F5;
}
.apply-shop ::v-deep .van-tabs__line {
  bottom:1.25rem;
}
.apply-shop ::v-deep .van-tab--active {
  font-weight: bold;
  color: #00001C;
  font-size: 1rem;
}
.verification ::v-deep .van-popup {
  background: transparent;
}
.coupon-detail {
  height: auto;
  min-height: 100vh;
  background: linear-gradient(178deg, var(--themeBaseColor) 0%,var(--themeBaseColor) 3.125rem, #F5F5F5 12.5rem, #F5F5F5 100%);
  padding:3rem 0 0 0;
  box-sizing: border-box;
  .coupon-info {
    margin: 0 0.9375rem;
    box-sizing: border-box;
    width: calc(100% - 1.875rem);
    .coupon-btn {
      margin:0rem 0 1.625rem  0;
      width: 14.1875rem;
      background: var(--themeBaseColor);
      border-radius: 1.25rem;
      font-weight: 500;
      color: #FFFFFF;
      font-size: 0.9375rem;
      line-height: 0.9375rem;
      padding:0.75rem 0 ;
    }
    .coupon-btnList {
      padding:0rem 0.625rem 1.375rem 0.625rem;

      flex-wrap: wrap;
      width: 100%;
      box-sizing: border-box;
      .btn-item {
        // margin:0 1.625rem 0 0;
        flex-direction: column;
        flex:25% 0 0;
        .btn-circle {
          width: 3.25rem;
          height: 3.25rem;
          border-radius: 50%;
          background-color: #F5F5F5;
          margin:0 0 0.4375rem 0;
          .iconfont {
            color:#3B3B4A;
            font-size: 1.25rem;
          }
        }
        p {
          font-size: 0.75rem;
          color: #3B3B4A;
        }
        .title {
          color: #3B3B4A;
          font-size: 1.5rem;
        }
      }
    }
    .code-desc {
      position: relative;
      .desc-circle {
        width: 0.9375rem;
        height: 0.9375rem;
        background-color: #F5F5F5;
        border-radius: 50%;
        position: absolute;
        top:0;
        left:0;
        transform: translate(-50%,-50%);
      }
      .desc-circle2 {
        width: 0.9375rem;
        height: 0.9375rem;
        background-color: #F5F5F5;
        border-radius: 50%;
        position: absolute;
        top:0;
        right:0;
        transform: translate(50%,-50%);
      }
      .desc-content {
        border-top:0.0625rem dashed #D6D6DC;
        padding:1.25rem 0 0.9375rem 0;
        margin:0 0.75rem;
        color: #6E6E79;
        line-height: 1.125rem;
        font-size: 0.75rem;
        text-align: left;
        // .rule-p {
        //   min-width: 18%;
        // }
      }
    }
  }
}
.user-main {
  margin:0 0.75rem;
  .user-hint {
    color: var(--themeBaseColor);
    font-size: 0.75rem;
    text-align: left;
    padding: 0.3125rem 0;
  }
  .user-num {
    color: var(--themeBaseColor);
    font-size: 0.75rem;
    text-align: left;
    padding:0 0 0.9375rem 0;
  }
}
.user-main input {
  width:100%;
  border: 0.0625rem solid #D6D6DC;
  border-radius: 0.5rem;
  outline: none;
  margin:0.875rem 0 0rem 0;
  padding: 0.6875rem 0;
  text-align: center;
}
.user-main ::-webkit-input-placeholder {
  font-size: 0.8125rem;
  color: #AAAAB3;
  text-align: center;
}
.apply-shop {
  .shop-list {
    margin:0 0.9375rem;
    .shop-type {
      text-align: left;
    }
    .title {
      text-align: left;
    }
    .shop-item {
      width: 100%;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: 0.75rem;
      padding:0.75rem;
      margin:0.625rem 0 0 0;
      .left {
        padding:0 0.5rem 0 0;
        // flex:1;
      }
      .wrap {
        // flex:2;
        width:70%;
        text-align: left;
        flex-direction: column;
        h3 {
          font-weight: bold;
          color: #00001C;
          font-size: 0.875rem;
        }
        p {
          color: #6E6E79;
          font-size: 0.75rem;
        }
      }
      .right {
        min-width: 28%;
        justify-content: flex-end;
        span {
          color: #6E6E79;
          font-size: 0.8125rem;
          padding:0 5px 0 0;
        }
        .iconfont {
          font-size: 1.75rem;
          color:var(--themeBaseColor);
        }

      }
    }

  }

  .shopGoods-list {
    margin:0.25rem 0.9375rem 0 0.9375rem;
    width:calc(100% - 1.875rem);
    box-sizing: border-box;
    flex-wrap: wrap;

  }
}
.verification-mian {
  width:100%;
  // height: 100%;
  border-radius: 0.9375rem;
  background-color: #fff;
  position: relative;
  h3 {
    font-weight: bold;
    color: #00001C;
    font-size: 1.125rem;
    line-height: 1.125rem;
    text-align: center;
    padding:1.4063rem 0 1rem 0;
  }
  .ver-img {
    padding:0 2.5625rem;
    img {
      width:100%;
      height: auto;
      display: block;
    }
  }
  p {
    padding:0.625rem 0 1.75rem 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: #AAAAB3;
  }

}
.close {
  position: absolute;
  bottom:5.875rem;
  left:50%;
  transform: translateX(-50%);
  .iconfont {
    font-size: 2.5rem;
    color:#D6D6DC;
  }
}

#coupon_v2_detail {
  overflow: hidden;
}
</style>
